<template>
  <div class="s-i-p-i-con">
    <div class="sipi-item">
      <component :is="winConfig.componentName" :pageInfo="pageInfo"></component>
    </div>
    <div class="sipi-item">
      <BusinessProcessingProgress v-if="showCard" :showCardList="showCardList" :dataInfo="dataInfo" :dbData="dbData"></BusinessProcessingProgress>
    </div>
  </div>
</template>

<script>
import pageEvent from '../util/pageEventsp'
//
import BusinessProcessingProgress from './BusinessProcessingProgress.vue'
// 税务变更
import sipiTaxChanges from './sipiTaxChanges.vue'
// 银行开户
import sipiBank from './sipiBank.vue'
// 邮寄资料
import sipiMailingInformation from './sipiMailingInformation.vue'
// 企业服务模式变更
import sipiEnterpriseServiceModel from './sipiEnterpriseServiceModel.vue'
// 税务申报
import sipiTaxDeclaration from './sipiTaxDeclaration.vue'
// 个税申报
import sipiIndividualIncomeTaxDeclaration from './sipiIndividualIncomeTaxDeclaration.vue'
// 电子签章
import ElectronicSignature from './ElectronicSignature.vue'
// 注册信息变更
import sipiChangeRegistrationInformation from './sipiChangeRegistrationInformation.vue'
// 增值业务
import sipivalueaddedservice from './sipivalueaddedservice.vue'

const componentNameList = {
  "银行开户":'sipiBank',
  "税务变更":'sipiTaxChanges',
  "邮寄资料":'sipiMailingInformation',
  "电子签章":'ElectronicSignature',
  "企业服务模式变更":'sipiEnterpriseServiceModel',
  "个税申报":'sipiIndividualIncomeTaxDeclaration',
  "注册信息变更":'sipiChangeRegistrationInformation',
  "企业注销":'ElectronicSignature',
  "税务申报":'sipiTaxDeclaration',
  "增值业务":'sipivalueaddedservice',
}
export default {
  name: 'ServicesInProgressItem',
  props:{
    pageInfo:{type:Object}
  },
  components:{BusinessProcessingProgress,sipiBank,sipiTaxChanges,
    sipiMailingInformation,sipiEnterpriseServiceModel,sipiIndividualIncomeTaxDeclaration,
    ElectronicSignature,
    sipiChangeRegistrationInformation,
    sipivalueaddedservice,
    sipiTaxDeclaration},
  data(){
    return {
      winConfig:{
        componentName:''
      },
      showCardList:{
        spjl:true,
        upload:true,
        payForm:true,
        uploadData:[],
        uploadReadonly:false,
      },
      dataInfo:{},
      dbData:{},
    }
  },
  watch:{
    pageInfo: {
      handler(val) {
        if(Object.prototype.toString.call(val)==='[object Object]'){
          const {pageData,dbData} = val
          // console.log('pageInfo===>',pageData,dbData);
          this.dataInfo = pageData
          this.dbData = dbData
          if(pageData.name=='税务申报'){
            this.showCardList.spjl = false
            this.showCardList.upload = false
            this.showCardList.payForm = false
          } else {
            this.showCardList.spjl = true
            this.showCardList.upload = true
            this.showCardList.payForm = true
          }
          this.pageEvent('showCardListState',dbData)
          this.winConfig.componentName = componentNameList[pageData.name]
        }
      },
      deep: true,
      immediate: true
    },
  },
  computed:{
    showCard(){
      if(this.showCardList.spjl===false&&this.showCardList.upload===false&&this.showCardList.payForm===false){
        return false
      } else {
        return true
      }
    }
  },
  methods: {
    pageEvent(type, ...args) {
      return pageEvent(type, this, ...args)
    },
  }
}
</script>

<style lang="less">
.s-i-p-i-con {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;

  .sipi-item {
    width: 100%;
  }
}
</style>
